<template>
  <div class="main">
    <div class="head">
      <div class="bottom">
        <i class="el-icon-back"></i>
        <div class="back" @click="backToIndex()">返回首页</div>
      </div>
      测评结果报告
      <div class="btn" @click="ExportSavePdf(username, '')">
        打印报告
      </div>
    </div>

    <div class="body">
      <div id="pdfCentent">
        <div class="info">
          <user-detail :sex="sex" :birth="birth" :mail="mail" :major="major" :score="score" :username="username">
          </user-detail>
        </div>
        <div class="index empty" v-if="score == 0">
          <el-empty :image-size="220" description="暂未测评" :image="require('./../../../assets/empty.png')"></el-empty>
        </div>
        <div class="index" v-else>
          <div class="charts">
            <div class="title">创新素质指数</div>
            <div class="graph">
              <charts :value="score"></charts>
            </div>
          </div>
          <div class="desc">
            <div class="title">创新素质指数</div>
            <div class="report">
              <report :value="score"></report>
            </div>
          </div>
        </div>
      </div>
      <div class="btn back-btn">
        <el-button @click="backToIndex">返回首页</el-button>
      </div>
    </div>

  </div>
</template>

<script>
import charts from "./charts.vue";
import report from "./reports.vue";
import vuepdf from "vue-pdf";
import userDetail from "./userDetail.vue";

import { queryPersonalInfo } from "./../../../api/resquery"

export default {
  name: "assresult",
  data: function () {
    return {
      mail: "",
      username: "",
      birth: "",
      major: "",
      sex: "",
      score: 0,
    };
  },
  components: {
    charts,
    report,
    vuepdf,
    userDetail,
  },
  methods: {
    backToIndex: function () {
      this.$router.back();
    },
  },
  mounted: function () {
    queryPersonalInfo({
      uid: this.$store.state.User.uid
    }).then(res => {
      if (res.rescode == 200) {
        this.mail = res.email;
        this.username = res.username;
        this.major = res.major;
        this.score = res.score;
        this.sex = res.sex;
      }
    })
  },
};
</script>

<style lang="less" scoped>
* {
  box-sizing: border-box;
}

.main {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  // height: 100%;
  box-sizing: border-box;
  background: #fff;
}

.head {
  width: 100%;
  height: 50px;
  font-size: 2.5em;
  align-content: center;
  background: #f1f1f1;
  display: flex;
  justify-content: space-between;

  .btn {
    float: right;
    width: 100px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    cursor: pointer;
    background: #409eff;
  }

  .btn:hover {
    background: #f17c67;
  }
}

.info {
  margin: 10px 5%;
}

.body {
  width: 100%;
  height: 90%;

  .index {
    display: flex;
    width: 100%;
    height: 90%;
    padding: 3px 50px;
    padding-bottom: 0;
    box-sizing: border-box;

    .charts,
    .desc {
      background: #fff;
      width: 35%;
      height: 90%;
      border: 1px solid #ccc;
      border-radius: 10px;

      .title {
        height: 20%;
        line-height: 36px;
        border-bottom: 2px solid #f17c67;
        width: 100%;
        font-size: 1.2em;
        font-weight: 500;
        font-weight: bold;
      }
    }

    .desc {
      width: 62%;
      margin-left: 30px;

      .report {
        height: 320px;
        width: 100%;
      }

    }
  }

  .graph {
    height: 320px;
  }

  .btn {
    width: 100%;
    display: flex;
    height: 2%;
    align-items: center;
    justify-content: center;
  }
}

.back-btn {
  margin-top: 20px;
}

.empty {
  display: flex;
  justify-content: center;
}

.bottom {
  display: flex;
  text-align: center;
  height: 50px;
  cursor: pointer;
  text-align: center;
  align-content: center;
  align-items: center;
}

.el-icon-back {
  font-size: 1.4em;
  font-weight: bold;
  padding-top: 2px;
  padding-left: 10px;
}
</style>
